<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>脚本化HTML</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#liuyanban{
			width: 300px;
			height: 400px;
			margin: 100px auto;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<div id="liuyanban">
	<h3>留言本</h3>
	<ul>
		<li>
			我是第一条留言
		</li>
		<li>
			我是第二条
		</li>

	</ul>
	
	<input type="button" name="add" value="添加" id="add">
	</div>
</body>
<script type="text/javascript">
	
	window.onload=function(){
		var liuyanban = document.getElementById('liuyanban'); 
	

	// console.log(liuyanban);
		// var ul = document.childNodes[1].childNodes[2].firstElementChild.children[1];
		var ul = liuyanban.children[1];
// console.log(document.childNodes[1].childNodes[2].firstElementChild.children[1]);
		var add = document.getElementById('add');
		var addli =document.createElement('li');
		var litext = document.createTextNode("我是通过dom来添加的li");

		add.onclick=function(){
				addli.appendChild(litext);
				ul.appendChild(addli);

		}

		}

</script>
</html>